'use strict';
import React from 'react';
import {Button, DatePicker, Form, Input, InputNumber, notification, Popconfirm, Table} from 'antd';

import {FormField, FormLayout, ModalFooter, ModalView} from 'antd-extra';
import FormBase from '../../../components/Base/FormBase';
import {connect} from "dva";
import moment from 'moment';
import 'moment/locale/zh-cn';

import ViewTitle from "../../../components/ViewTitle";
import styles from "../../index.less";
import ModalCreateOrEdit2 from "../../dic/modal/ModalCreateOrEdit2";
import UploadPic from "../../../components/UploadPic";

moment.locale('zh-cn');

@Form.create()
@connect(({
            tenant,
            global,
            dynamicLabel,
            dic
          }) => ({...tenant, ...dic, ...dynamicLabel, ...global}))
export default class ModalCreateOrEditStep extends FormBase {
  constructor(props) {
    super(props);
    const {record} = this.props;
    this.state = {...record};

  }

  renderFoot = () => {
    const {foot, value, callback, modalRef, record, form} = this.props;

    if (foot) {
      return foot(value, modalRef);
    } else {
      return (
        <ModalFooter>
          <Button type="primary" onClick={() => {
            form.validateFields((err, values) => {
              if (err) {
                const {code} = err;
                const {errors} = code;
                errors.forEach(item => {
                  notification.error(item);
                });
                return;
              }
              values.code = record ? record.code : "ESP" + moment().format('YYYYMMDDHHmmss');
              const {fileList} = this.state;
              values.fileList = fileList;
              callback(values);
              modalRef.close();
            });

          }}>确定</Button>
          <Button onClick={() => {
            modalRef.close();
          }}>取消</Button>
        </ModalFooter>
      );
    }
  };

  cols() {
    return [
      {title: '药剂名称', dataIndex: 'name', key: "name"},
      {title: '溶解比例', dataIndex: 'rate', key: "rate"},
      {title: '投加量', dataIndex: 'addCount', key: "addCount"},
      {
        title: '操作', dataIndex: 'opt', key: "opt", render: (value, record) => {

        }
      }
    ];
  }

  getList(record) {
    const names = ['A ','B ','C ','D ','E ','F ','G ','H ','I ','J '];
    const list = [];
    for (let i = 0; i < names.length; i++) {
      const label = names[i] + "药剂名称";
      const name = names[i] + 'name';
      const name1 = names[i] + 'rate';
      const name2 = names[i] + 'add';
      list.push(<FormField
        label={label}
        name={name}
        initialValue={record[name]}
      >
        <Input style={{width: "100%"}}></Input>
      </FormField>);
      list.push(<FormField
        label={'溶解比例'}
        name={name1}
        initialValue={record[name1]}
      >
        <Input style={{width: "100%"}}></Input>
      </FormField>);
      list.push(<FormField
        label={'投放量'}
        name={name2}
        initialValue={record[name2]}
      >
        <Input style={{width: "100%"}}></Input>
      </FormField>);
    }
    return list;
  }

  render() {
    const {record = {}, form} = this.props;
    const {water,  fileList} = record;
    return <div>
      <FormLayout form={form} cols={2}>
        <FormField
          label={'实验水量'}
          name={'water'}
          required={true}
          initialValue={water}
        >
          <InputNumber style={{width: "100%"}}></InputNumber>
        </FormField></FormLayout>
      <FormLayout form={form} cols={3}>
        {this.getList(record)}
      </FormLayout>
      {/*{<ViewTitle title={'药剂列表'} actions={<Button onClick={() => {*/}
      {/*}}>添加</Button>}></ViewTitle>}*/}
      {/*{*/}
      {/*  <Table*/}
      {/*    className={styles.antTable}*/}
      {/*    bordered={true}*/}
      {/*    columns={this.cols()}*/}
      {/*    dataSource={records}*/}
      {/*    scroll={{x: true}}*/}
      {/*    pagination={true}*/}
      {/*  ></Table>*/}
      {/*}*/}
      {<UploadPic fileList={fileList} title={"最终效果图"}
                  callback={f => this.setState({fileList: f.fileList})}></UploadPic>}
      {this.renderFoot()}
    </div>;
  }
}
